<style scoped lang="stylus" type="text/stylus">
  @import 'fundInfo.styl';
</style>

<style>
  /* iview对话框样式调整 */
  .ivu-poptip-body {
    padding-right    : 0px;
    background-color : #5b5f6b;
    border-radius    : 8px;
  }

  .ivu-poptip-inner {
    border-radius : 9px;
  }

  .api {
    height : 160px;
  }

  .ivu-poptip-popper[x-placement^="right"] .ivu-poptip-arrow:after {
    border-right-color : #5b5f6b;
    left               : 0px;
    bottom             : -5px;
  }

  /* 滚动条颜色 */
  .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
    background-color : #56a6f6;
  }

  .ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y,
  .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
    width : 7px;
  }

  .ps > .ps__scrollbar-y-rail {
    width : 10px;
  }
</style>


<template>
  <div class='ListLeft'>
    <div class="hideLeft">
      <span class="onlinePolicyTittle">在线政策</span>
      <div class="hideLeft-Arrows" @click="shrink()">
        <Icon v-if="shrinkLeft" type="ios-arrow-left" class="ios-arrow-right"></Icon>
        <Icon v-else type="ios-arrow-right" class="ios-arrow-right"></Icon>
      </div>
    </div>
    <div id="fundInfoBigBox">
      <VuePerfectScrollbar class="fundInfoScrollbar">
        <div class="fundInfo" v-for="(item, index) in fundInfoDatas.results" :key="index">
          <!-- {{item}} -->
          <div class="fundTittle">
            <span class="fundSortNumber">{{index+1}}</span>
            <span class="fundTittle-shortTitle">{{item.shortTitle}}</span>
            <p class="fundRules">{{item.spirit}}</p>
          </div>

          <div class="fundcontent" v-show='fundInfoData.fundcontentList.includes(index)'>
            <ul class="funfList">
              <li @drop='unitiDrop($event,item,items)'
                  @dragover='unitiAllowDrop'
                  class="funfListLi" v-for="(items, index) in item.prizes" :key="index">
                <div class="fundListBorder">
                  <!-- <p class="sort">资助:{{index + 1}}</p> -->
                  <p class="name">{{items.title}}</p>
                  <span class="genre">资助类型：<span>可运算字段： x 万元</span></span>
                  <!-- <input type="text"> -->
                  <!-- 左边 资助介绍详情 -->
                  <div class="fundBox">
                    <div class="listLeft">
                      <p class="introduce">{{items.description}}</p>
                    </div>

                    <!-- 中间空格 -->
                    <div class="listCentre"></div>

                    <!-- 右边 资助匹配详情-->
                    <div class="listRight">
                      <div class="listRightLocation">
                        <div class="logic" style="margin-top:10px;">
                          <span class="logicData">匹配逻辑</span>
                          <span class="logicNumber">
                 <Poptip placement="right" width="300" transfer trigger="hover">
                      <!-- 匹配逻辑的数量 -->
                   <!-- dataCache -->
                      <span class="mateLogicNumber" type="ghost" @mouseenter="getLogicData(item.id,items)"
                            style="cursor: pointer;"> {{items.dataCache.length==0?'查询':items.dataCache.length}} </span>
                      <div class="iview-centent-box" slot="content" style="height:200px; white-space: normal;">
                          <div class="hoverFunfInfo">
                        <VuePerfectScrollbar style='height:200px'>
                          <div class="logicCentent">
                             <div v-if="items.dataCache.length" class="logicCententTop"
                                  v-for="(logic, logicIndex) in items.dataCache" :key="logicIndex">
                                <span class="hoverFundInfo-text">
                                      {{logic.title}}
                                </span>
                                <ul class="hoverFundInfo-TopList">
                                  <li v-for="(question, questionIndex) in logic.answers" :key="questionIndex">
                                    <span class="type-of-enterprise">{{question.content}}</span>
                                    <span class="delete"
                                          @click="deleteQuestion(item.id,items.id,logic,logicIndex,question,questionIndex)"><Icon
                                      type="close" style="color:red; size:14px;"></Icon></span>
                                  </li>
                                </ul>
                             </div>


                        </div>
                     </VuePerfectScrollbar>
                     <div class="ligature"
                          @mouseenter="policyToChartEnter"
                          @mouseleave="policyToChartLeave"
                          :draggable="true"
                          @dragstart="policyToChartFun($event,item,items)"><i class="iconfont icon-line_1"
                                                                              style="font-size:20px"></i></div>
                  </div>
                  </div>
                  </Poptip>
                </span>
                        </div>
                        <div class="maxFund">
                          <span class="maxFundData">最高资助</span>
                          <input class="totalFund" type="text"
                                 @change="totalFundBlur(items.id)"
                                 :value='items.maxPrize'>
                          <!-- <span class="totalFund">{{items.maxPrize}}</span> -->
                        </div>

                        <div class="level">
                          <span class="levelData">资助档位</span>
                          <!-- class="levelNumber" -->
                          <span class="levelNumber">
                  <!-- 悬浮弹框==资助档位 -->
                  <Poptip placement="right" transfer width="440" trigger="hover" display:none>
                  <span class="levelNumberData" type="ghost" @mouseenter="getLevelNumberData(items.id)"
                        style="cursor: pointer;">{{items.count}}</span>
                  <div class="api" slot="content">
                      <div class="hoverLevelInfo">
                        <VuePerfectScrollbar style='height:160px'>
                      <div class="hoverLevelInfo-Top">
                        <ul class="hoverLevelInfo-Top-ul">
                          <!-- 资助描述 -->
                            <div class="levelQuestionDescription">
                              <input type="text" class="Description"
                                     @change="ChangeDescription(items.id)"
                                     v-model="fundInfoData.levelNumberData.question"
                                     placeholder="资助问题描述。。。">
                            </div>
                          <li class="hoverLevelInfo-Top-ul-li"
                              v-for="(gears,childIndex) in fundInfoData.levelNumberData.level"
                              :key="childIndex">
                            <span><input type="text" class="scope" placeholder='请输入选项描述' v-model="gears.title"
                                         :disabled="gears.isTrue"></span>
                            <span><input type="text" class="money" placeholder='请输入金额' v-model="gears.actualAmount"
                                         :disabled="gears.isTrue"></span>


                            <span class="up-down" style="margin:0 5px;">
                                <div @click="moveUp(gears.id,'up')" class="up"
                                     style="width:20px;height:10px;display:inner-block;background:#666;margin-bottom:2px"><Icon
                                  type="ios-arrow-up" style="color:white;" size="12"></Icon></div>
                                <div @click="moveDown(gears.id,'down')" class="down"
                                     style="width:20px;height:10px;display:inner-block;background:#666"><Icon
                                  type="ios-arrow-down" style="color:white;" size="12"></Icon></div>
                            </span>

                            <span class="deleteOption" @click="deleteOption(item.id,items.id,childIndex)"><Button
                              type="error"
                              size="small"><Icon
                              type="close" style="color:white;font-size:14px;"></Icon></Button></span>
                            </li>

                          <!-- 添加资助问题按钮 -->
                            <div class="addOption" @click='addOptionLi()'><Icon type="plus" style="color:white;"
                                                                                size="16"></Icon></div>
                        </ul>
                      </div>
                      </VuePerfectScrollbar>
                    <div class="hoverLevelInfo-bottom">
                        <!-- <Icon type="close" style="color:white;font-size:20px;font-weight: 400px;"></Icon> -->
                        <div class="leftDelete" @click="cancelSubmit()"><Icon type="android-close"
                                                                              style="color:white;font-size:20px;cursor: pointer;"></Icon></div>
                        <div class="rightKeep" @click="submitData(item.id,items.id)"><Icon type="android-done"
                                                                                           style="color:white;font-size:20px;cursor: pointer;"></Icon></div>
                      </div>

                  </div>
                    <!-- ==== -->
                  </div>
                 </Poptip>
                </span>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
                <!-- <hr> -->
              </li>

            </ul>
          </div>

          <!-- 下拉箭头 -->
          <div class="arrows">
            <!-- @click="thirdPartyDownUpActive = !thirdPartyDownUpActive -->
            <div class="updown" @click="upAndDow(index)">
              <Icon v-if="fundInfoData.fundcontentList.includes(index)" type="ios-arrow-up"></Icon>
              <Icon v-else type="ios-arrow-down"></Icon>
            </div>
          </div>
        </div>
      </VuePerfectScrollbar>
    </div>
  </div>
</template>

<script>
  import common from "../../../common/common.js";

  export default {
    name      : "fundInfo",
    data() {
      return {
        fundLength         : null, //档位的长度
        gearsId            : null, //档位id
        policyId           : null, //政策id
        prizeId            : null, //匹配逻辑id(删除问题和答案用)
        fundId             : null, //资助id
        // fundLength: null, //资助档位个数
        shrinkLeft         : true, //縮放箭頭的方向
        DescriptionValue   : '', //资助问题描述
        getDescriptionValue: '', //保存每次请求获取到的资助问题
        fundInfoData       : {
          // 资助详情
          fundInfoList   : [],
          //左边各个政策
          fundcontentList: [],
          //资助档位数据
          levelNumberData: [],
          //匹配逻辑
          mateLogicData  : [],
          //匹配逻辑个数
          logicLength    : null
        }
      };
    },
    props     : ["chartToPolicy", "fundInfoDatas"],
    computed  : {},
    methods   : {
      // 点击上下箭头展示政策详情
      upAndDow(index) {
        if (this.fundInfoData.fundcontentList.includes(index)) {
          let $index = this.fundInfoData.fundcontentList.findIndex(
            n => n == index
          );
          this.fundInfoData.fundcontentList.splice($index, 1);
        } else {
          this.fundInfoData.fundcontentList.push(index);
        }
      },

      //一进页面就获取资助政策详情(由父组件传过来)
      getFundInfo() {
        // this.ajaxData(
        //   {
        //     type: "get",
        //     url: "/prize/page?type=P&page=1&pageSize=100",
        //     data: {}
        //   },
        //   (res, all) => {
        //     this.fundInfoData.fundInfoList = res.results;
        //     console.log(this.fundInfoData.fundInfoList);
        //   }
        // );
        this.fundInfoData.fundInfoList = this.fundInfoDatas.results;
        // console.log(this.fundInfoData.fundInfoList);
      },

      //最高资助自定义值
      totalFundBlur(id) {
        var maxPrizeValue  = document.querySelector(".totalFund").value;
        this.maxPrizeValue = maxPrizeValue;
        if (this.maxPrizeValue == "") {
          this.$Message.error("请输入资助金额！");
        }
        if (this.maxPrizeValue != "") {
          this.ajaxData(
            {
              type: "post",
              url : `/prize/${id}/updateMaxPrize`,
              data: {
                id      : id,
                maxPrize: this.maxPrizeValue
              }
            },
            res => {
              // console.log("数据修改成功！");
            }
          );
        }
      },

      //获取资助档位列表
      getLevelNumberData(id) {
        this.fundId = id; //保存每次获取的资助档位列表的id
        (this.getLevelDataID = id),
          this.ajaxData(
            {
              url : `/prize/list/${this.getLevelDataID}`,
              type: "get",
              data: {}
            },
            (res, all) => {
              // console.log("返回来的数据是"+JSON.stringify(res));
              //这里是设置已有的选项不能点击修改
              if (res.level) {
                res.level.forEach(item => {
                  item.isTrue = true;
                });
              }
              this.fundLength                   = res.level.length; // 保存每次获取的档位的个数
              this.fundInfoData.levelNumberData = res;
              this.getDescriptionValue          = res.question;//保存每次请求获取到的问题
            }
          );
      },

      // 资助档位添加li标签
      addOptionLi() {
        // 判断是否长度和之前的一致，如果不一致说明已经添加了一个li标签，不需要再添加
        if (this.fundInfoData.levelNumberData.level.length == this.fundLength) {
          this.fundInfoData.levelNumberData.level.push({
            title       : "",
            actualAmount: "",
            isTrue      : false
          });
        }

      },

      //获取修改档位问题
      ChangeDescription(questionID) {
        var DescriptionValue  = document.querySelector(".Description").value;
        this.DescriptionValue = DescriptionValue;
      },

      // 提交新增档位数据
      submitData(policyId, id) {
        //提交的时候先判断是否有增加新的档位
        // console.log(this.fundLength);
        this.policyId = policyId;
        this.gearsId  = id;
        if (this.fundInfoData.levelNumberData.level.length == this.fundLength) {
          return;
        }
        let addData = this.fundInfoData.levelNumberData.level[
        this.fundInfoData.levelNumberData.level.length - 1
          ];
        if (
          addData.title.trim() == "" ||
          addData.title.trim().length == 0 ||
          addData.actualAmount.trim() == "" ||
          addData.actualAmount.trim().length == 0
        ) {
          return;
        }
        // if (this.DescriptionValue == '' && this.getDescriptionValue) {
        //   alert('问题描述不能为空');
        //   return;
        // }
        this.ajaxData(
          {
            type: "post",
            url : `/prize/save`,
            data: {
              prizeId     : id,
              title       : addData.title,
              actualAmount: addData.actualAmount,
              question    : this.DescriptionValue == '' ? this.getDescriptionValue : this.DescriptionValue,
            }
          },
          res => {
            this.getLevelNumberData(this.fundId); //重新获取档位
            this.DescriptionValue = '',//清空上一个用户修改保存的问题描述
              // this.getFundInfo();
              this.notifyAdd();
            alert("提交成功！");
          }
        );
      },

      // 取消新增档位
      cancelSubmit() {
        this.getLevelNumberData(this.fundId); //重新获取档位
      },
      // 删除档位数据
      deleteOption(policyId, gearsId, childIndex) {
        // console.log(policyId);
        // console.log(gearsId);
        // console.log(childIndex);

        this.policyId = policyId;
        this.gearsId  = gearsId;
        if (
          childIndex + 1 == this.fundInfoData.levelNumberData.level.length &&
          this.fundInfoData.levelNumberData.level.length != this.fundLength
        ) {
          this.fundInfoData.levelNumberData.level.splice(childIndex, 1);
        } else {
          let id = this.fundInfoData.levelNumberData.level[childIndex].id;
          this.ajaxData(
            {
              type: "get",
              url : `/prize/${id}/delete`
            },
            res => {
              this.getFundInfo();
              this.fundInfoData.levelNumberData.level.splice(childIndex, 1);
              this.fundLength = this.fundInfoData.levelNumberData.level.length; // 保存每次获取的档位的个数
              // console.log("长度是" + this.fundLength);
              this.notifySub();
            }
          );
        }
      },

      // 子组件传值修改父组件的值(更新左边子组件添加档位的个数)
      notifyAdd() {
        this.$emit("refreshAdd", {
          policyId: this.policyId,
          gearsId : this.gearsId
        });
      },
      // 子组件传值修改父组件的值(更新左边子组件添加档位的个数)
      notifySub() {
        this.$emit("refreshSub", {
          policyId: this.policyId,
          gearsId : this.gearsId,
          length  : this.fundLength
        });
      },

      //档位上移
      moveUp(levelId, direction) {
        let prizeId = this.fundId;
        // console.log('点击上移' + prizeId, levelId, direction);
        // console.log(prizeId,levelId,direction);
        this.ajaxData(
          {
            type: "get",
            url : `/prize/${prizeId}/prizelevel/${levelId}/roll/${direction}`
          },
          res => {
            // console.log(prizeId);
            // console.log(levelId);
            this.getLevelNumberData(this.fundId); //重新获取档位
          }
        );
      },
      //档位下移
      moveDown(levelId, direction) {
        let prizeId = this.fundId;
        // console.log('点击下移' + prizeId, levelId, direction);
        this.ajaxData(
          {
            type: "get",
            url : `/prize/${prizeId}/prizelevel/${levelId}/roll/${direction}`
          },
          res => {
            this.getLevelNumberData(this.fundId); //重新获取档位
            // console.log("已处理！");
          }
        );
      },

      //匹配逻辑
      getLogicData(id, items) {
        this.prizeId = items.id;
        if (!items.dataCache.length) {
          this.ajaxData(
            {
              type: "get",
              url : `/prizematch/findAnswerByPrizeId`,
              data: {
                prizeId: items.id
              }
            },
            res => {
              this.$emit("changeFundInfoData", {
                policyId  : id,
                prizeId   : items.id,
                prizesData: res.prizes
              });
            }
          );
        }
      },

      //删除匹配逻辑问题
      deleteQuestion(policyId,
                     prizeId,
                     problem,
                     problemIndex,
                     answer,
                     answerIndex) {
        this.$emit("delChartPrizeFun", {
          policyId,
          prizeId,
          problem,
          answer
        });
      },

      //獲取元素信息
      getDomDataLeft() {
        var w1                  = document.querySelector(".SidebarLeft");
        this.w1                 = w1;
        var onlinePolicyTittle  = document.querySelector(".onlinePolicyTittle");
        this.onlinePolicyTittle = onlinePolicyTittle;
        var fundInfoBigBox      = document.querySelector("#fundInfoBigBox");
        this.fundInfoBigBox     = fundInfoBigBox;
        var w2                  = document.querySelector(".centerPicture");
        this.w2                 = w2;
        var w3                  = document.querySelector(".SidebarRight");
        this.w3                 = w3;
      },
      //點擊縮放左邊欄
      shrink() {
        this.shrinkLeft = !this.shrinkLeft;
        //当左右边栏都正常显示的情况下
        if (this.w1.clientWidth >= 448 && this.w3.clientWidth >= 398) {
          this.w1.setAttribute("class", "bb");
          this.w2.setAttribute("class", "cc");
          this.onlinePolicyTittle.setAttribute("class", "onlinePolicyTittleHide");
          this.fundInfoBigBox.setAttribute("class", "fundInfoBigBoxHide");
          //当左边栏正常显示，右边栏收起来的情况下
        } else if (this.w1.clientWidth >= 448 && this.w3.clientWidth < 398) {
          this.w1.setAttribute("class", "bb");
          this.w2.setAttribute("class", "ff");
          this.onlinePolicyTittle.setAttribute("class", "onlinePolicyTittleHide");
          this.fundInfoBigBox.setAttribute("class", "fundInfoBigBoxHide");
          //当左边栏收起来、右边栏正常显示的情况下
        } else if (this.w1.clientWidth < 448 && this.w3.clientWidth >= 398) {
          this.w1.setAttribute("class", "SidebarLeft");
          this.w2.setAttribute("class", "centerPicture");
          this.onlinePolicyTittle.setAttribute("class", "onlinePolicyTittle");
          this.fundInfoBigBox.removeAttribute("class", "fundInfoBigBoxHide");
          //当左右边栏都收起来的情况下
        } else if (this.w1.clientWidth < 448 && this.w3.clientWidth < 398) {
          this.w1.setAttribute("class", "SidebarLeft");
          this.w2.setAttribute("class", "cc2");
          this.onlinePolicyTittle.setAttribute("class", "onlinePolicyTittle");
          this.fundInfoBigBox.removeAttribute("class", "fundInfoBigBoxHide");
        }
      },
      //======
      unitiDrop(e, policyItems, prizeItems) {
        this.unitiAllowDrop(e);

        let shortTitle = policyItems.shortTitle,
            policyId   = policyItems.id,
            prizeId    = prizeItems.id,
            prizeTitle = prizeItems.title,
            dataCache  = prizeItems.dataCache;

        let chartProblem = this.chartToPolicy.problem;
        let chartAnswers = this.chartToPolicy.answers;
        let chartPrizes  = chartAnswers.prizes;
        let hasProblem   = dataCache.find(v => {
          return v.position == chartProblem.position;
        });
        let policyItem   = hasProblem
          ? hasProblem.answers.find(v => {
            return v.position == chartAnswers.position;
          })
          : "";
        let chartPolicy  = chartPrizes.find(v => {
          return v.policyId == policyId;
        });
        let chartPrize   = chartPolicy
          ? chartPolicy.prizes.find(v => {
            return v.prizeId == prizeId;
          })
          : "";
        if (!hasProblem) {
          dataCache.push({
            title   : chartProblem.title,
            id      : chartProblem.id,
            position: chartProblem.position,
            answers : [
              {
                id      : chartAnswers.id,
                position: chartAnswers.position,
                content : chartAnswers.content
              }
            ]
          });
        } else if (hasProblem && !policyItem) {
          hasProblem.answers.push({
            id      : chartAnswers.id,
            position: chartAnswers.position,
            content : chartAnswers.content
          });
        }
        if (!chartPolicy) {
          chartPrizes.push({
            policyId  : policyId,
            shortTitle: shortTitle,
            prizes    : [
              {
                prizeId: prizeId,
                title  : prizeTitle
              }
            ]
          });
        } else if (chartPolicy && !chartPrize) {
          chartPolicy.prizes.push({
            prizeId: prizeId,
            title  : prizeTitle
          });
        }
      },

      //=====
      unitiAllowDrop(e) {
        e.preventDefault();
      },
      //======
      policyToChartFun(e, item, items) {
        this.$emit("changePolicyToChart", {
          policy: item,
          prize : items
        });
        this.policyToChartEnter()
      },
      policyToChartEnter() {
        const chart = document.querySelectorAll('.unit-problem-list-li');
        for (let v of chart) {
          v.querySelector('.ivu-input').className = 'ivu-input selected'
        }
      },
      policyToChartLeave() {
        const chart = document.querySelectorAll('.unit-problem-list-li');
        for (let v of chart) {
          v.querySelector('.ivu-input').className = 'ivu-input'
        }
      },
    },
    mounted() {
      // this.addOptionLi();
      this.getDomDataLeft();
    },
    created() {
      this.getFundInfo();
    }
  };
</script>
